<template>
    <Container class="tag-list">
        <div class="container-header group" slot="header">
            <Input
                v-if="tab == 'tab1'"
                class="start"
                v-model.trim="keyword"
                placeholder="商品标签"
                @on-enter="onSearchBtnClick">
            </Input>
            <Input
                v-if="tab == 'tab2'"
                class="start"
                v-model.trim="keyword"
                placeholder="服务标签"
                @on-enter="onSearchBtnClick">
            </Input>
            <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick"></Button>
        </div>
        <Tabs v-model="tab" @on-click="onClick">
            <Button
                size="large"
                class="item"
                type="primary"
                slot="extra"
                icon="md-add"
                @click="onAddTag(tab)">新建标签</Button>
            <TabPane label="商品标签" name="tab1">
              <homeTable
                :list="list"
                @getData="getData"
                @onPageSizeChange="onPageSizeChange"
                @onPageChange="onPageChange"
              />
            </TabPane>
            <TabPane label="服务标签" name="tab2">
              <homeTable
                :list="serviceList"
                @getData="getServerData"
                @onPageSizeChange="onPageSizeChange"
                @onPageChange="onPageChange"
              />
            </TabPane>
        </Tabs>
				<TagEditItem ref="tagEdit" @complete="getData" tab="tab1"></TagEditItem>
				<ServeEditItem ref="serveEdit" @complete="getServerData" tab="tab2"></ServeEditItem>
    </Container>
</template>
<script>
import homeTable from '~/homeTable'
import TagListData from './list/TagListData'
import ServiceListData from './list/ServiceListData'
import TagEditItem from './edit/TagEditItem'
import ServeEditItem from './edit/ServeEditItem'
import { clearEmpty } from '@/util'
export default {
  name: 'product/tag/list',
	components: {
    TagEditItem,
    ServeEditItem,
    homeTable
	},
  data() {
    return {
      keyword: '',
      tab: 'tab1',
      list: TagListData,
      serviceList: ServiceListData
    }
  },
  mounted() {
    this.list.currentPage =  ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
		this.$bus.$on('onAddTag', this.onAddTag)
    this.$bus.$on('onEdit', this.onEdit)
    this.$bus.$on('onDelete', this.onDelete)
		this.getData()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    onClick(name) {
      if (name && this.tab === 'tab1') {
        this.list.currentPage = 1
        this.getData()
      }
      if (name && this.tab === 'tab2') {
        this.serviceList.currentPage = 1
        this.getServerData()
      }
    },
    onSearchBtnClick() {
      if (this.tab === 'tab1') {
        this.getData()
      }
      if (this.tab === 'tab2') {
        this.getServerData()
      }
		},
    getData() {
			let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        name: this.keyword
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$ajaxGet('/product/tag/product_center/page', param).then(data => {
          this.list.data = []
          this.list.totalItem = Number(data.total)
          this.list.data = (data.records || []).map(item => {
            return {
              placeholder: '',
							name: item.name,
              id: item.id,
              color: item.color
            }
          })
          this.list.status = 'pass'
        }).catch(() => {  
          this.list.status = 'error'
        })
		},
    getServerData() {
			let param = {
        current: this.serviceList.currentPage,
        size: this.serviceList.pageSize,
        name: this.keyword
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$jsonPost('/product/server/tag/page', param).then(data => {
          this.serviceList.data = []
          this.serviceList.totalItem = Number(data.total)
          this.serviceList.data = (data.records || []).map(item => {
            return {
              placeholder: '',
							name: item.name,
              id: item.id,
              headImage: item.headImage,
              productImage: item.productImage
            }
          })
          this.serviceList.status = 'pass'
        }).catch(() => {  
          this.serviceList.status = 'error'
        })
		},
    onAddTag(tab) {
      if (tab === 'tab1') {
        this.$refs.tagEdit.updateForm()
      }
      if (tab === 'tab2') {
        this.$refs.serveEdit.updateForm()
      }
		},
		onEdit(id) {
      if (this.tab === 'tab1') {
        this.$refs.tagEdit.updateForm(id, this.tab)
      }
      if (this.tab === 'tab2') {
        this.$refs.serveEdit.updateForm(id, this.tab)
      }
		},
    onDelete(id, name, index) {
      let url = this.tab === 'tab1' ? `/product/tag/product_center/delete/${id}` : `/product/server/tag/deleted/${id}`
      let list = this.tab === 'tab1' ? this.list : this.serviceList
			this.$Modal.confirm({
        title: '删除',
        content: '确定删除当前商品标签？',
        onOk: () => {
          this.$ajaxPost(url).then(data => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">${name}</span> 已被删除。`
            })
            list.data.splice(index, 1)
          })
        }
      })
		},
    onPageChange(number) {
      if (this.tab === 'tab1') {
        this.list.currentPage = number
        this.$router.push({
          name: 'product/tag/list',
          query: {
            currentPage: this.list.currentPage,
            pageSize: this.list.pageSize
          }
        })
        this.getData()
      }
      if (this.tab === 'tab2') {
        this.serviceList.currentPage = number
        this.$router.push({
          name: 'product/tag/list',
          query: {
            currentPage: this.serviceList.currentPage,
            pageSize: this.serviceList.pageSize
          }
        })
        this.getServerData()
      }
		},
    onPageSizeChange(pageSize) {
      if (this.tab === 'tab1') {
        this.list.currentPage = 1
        this.list.pageSize = pageSize
        this.$router.push({
          name: 'product/tag/list',
          query: {
            currentPage: this.list.currentPage,
            pageSize: this.list.pageSize
          }
        })
        this.getData()
      }
      if (this.tab === 'tab2') {
        this.serviceList.currentPage = 1
        this.serviceList.pageSize = pageSize
        this.$router.push({
          name: 'product/tag/list',
          query: {
            currentPage: this.serviceList.currentPage,
            pageSize: this.serviceList.pageSize
          }
        })
        this.getServerData()
      }
		}
	},
	watch: {
		$route() {
      if (this.tab === 'tab1') {
        let page = ~~this.$route.query.currentPage
        let table = this.list
        if (table.currentPage !== page) {
          table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage
          this.getData()
        }
      }
			if (this.tab === 'tab2') {
        let page = ~~this.$route.query.currentPage
        let table = this.serviceList
        if (table.currentPage !== page) {
          table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage
          this.getServerData()
        }
      }
		}
	}
}
</script>
